translate3d()
Baseline 2022
Newly available
Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
translate3d()
CSS 函式以 3D 場境的方式定位元素。其結果為 <transform-function>
資料型別。
嘗試一下
這個轉場的特徵是三維向量,其坐標則定義元素的方向該如何移動。
語法
translate3d(tx, ty, tz)
數值
tx
-
其
<length>
代表平移向量的橫坐標。 ty
-
其
<length>
代表平移向量的縱坐標。 tz
-
其
<length>
代表平移向量的 z 分量。數值不能是<percentage>
:否則,此轉場的屬性無效。
ℝ2 上的笛卡兒座標(Cartesian coordinate) | ℝℙ2 上的齊次坐標(homogeneous coordinates) | ℝ3 上的笛卡兒座標 | ℝℙ3 上的齊次坐標 |
---|---|---|---|
This transformation applies to the 3D space and can't be represented on the plane. |
A translation is not a linear transformation in ℝ3 and can't be represented using a Cartesian-coordinate matrix. |
示例
使用單軸平移
HTML
html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
css
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
/* Equivalent to perspective(500px) translateX(10px) */
transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink;
}
結果
Combining z-axis and x-axis translation
HTML
html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
css
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
結果
規範
Specification |
---|
CSS Transforms Module Level 2 # funcdef-translate3d |
瀏覽器相容性
請參見 <transform-function>
。